﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Responsive Bootstrap 4 Admin &amp; Dashboard Template">
    <meta name="author" content="Bootlab">
    <title>DataTables - AppStack - Admin &amp; Dashboard Template</title>
  <link rel="stylesheet" href="css/layui.css">
  <script src="js/layui.all.js"></script>
  <script src="js/layui.js"></script>
 <link rel="preconnect" href="//fonts.gstatic.com/" crossorigin="">
    <style>
        body {
            opacity: 0;
        }
    </style>
    <script src="js\settings.js"></script>
    <script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-120946860-6"></script>
    <script>
        window.dataLayer = window.dataLayer || [];

        function gtag() {
            dataLayer.push(arguments);
        }

        gtag('js', new Date());

        gtag('config', 'UA-120946860-6');
    </script>
</head>

<body>
<div class="wrapper">
    <nav id="sidebar" class="sidebar">
        <div class="sidebar-content ">
            <a class="sidebar-brand" href="index.html">
                <i class="align-middle" data-feather="box"></i>
                <span class="align-middle">Smart Ops</span>
            </a>

            <ul class="sidebar-nav">
                <li class="sidebar-header">
                    Main
                </li>
                <li class="sidebar-item">
                    <a class="sidebar-link" href="calendar.html">
                        <i class="align-middle" data-feather="calendar"></i> <span class="align-middle">统计信息</span>
                    </a>
                </li>

                <li class="sidebar-item">
                    <a href="#pages" data-toggle="collapse" class="sidebar-link collapsed">
                        <i class="align-middle" data-feather="layout"></i> <span class="align-middle">设备管理</span>
                    </a>
                    <ul id="pages" class="sidebar-dropdown list-unstyled collapse " data-parent="#sidebar">
                        <li class="sidebar-item"><a class="sidebar-link" href="pages-profile.html">Profile</a></li>
                        <li class="sidebar-item"><a class="sidebar-link" href="pages-settings.html">Settings</a></li>
                    </ul>
                </li>


                <li class="sidebar-item">
                    <a class="sidebar-link" href="calendar.html">
                        <i class="align-middle" data-feather="calendar"></i> <span class="align-middle">命令模板</span>
                    </a>
                </li>

                <li class="sidebar-item">
                    <a class="sidebar-link" href="ssh.html">
                        <i class="align-middle" data-feather="calendar"></i> <span class="align-middle">快速执行</span>
                    </a>
                </li>

                                <li class="sidebar-item">
                    <a class="sidebar-link" href="ssh.html">
                        <i class="align-middle" data-feather="calendar"></i> <span class="align-middle">版本发布</span>
                    </a>
                </li>

                <li class="sidebar-item">
                    <a class="sidebar-link" href="calendar.html">
                        <i class="align-middle" data-feather="calendar"></i> <span class="align-middle">历史记录</span>
                    </a>
                </li>


            </ul>


        </div>
    </nav>

    <div class="main">
        <nav class="navbar navbar-expand navbar-light bg-white">
            <a class="sidebar-toggle d-flex mr-2">
                <i class="hamburger align-self-center"></i>
            </a>


            <div class="navbar-collapse collapse">
                <ul class="navbar-nav ml-auto">

                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle d-none d-sm-inline-block" href="#" data-toggle="dropdown">
                            <img src="img\avatars\avatar.jpg" class="avatar img-fluid rounded-circle mr-1"
                                 alt="Chris Wood"> <span class="text-dark">Chris Wood</span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right">
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="#">Sign out</a>
                        </div>
                    </li>
                </ul>
            </div>
        </nav>

        <main class="content">
            <div class="container-fluid p-0">
                <a href="addhost.html">
            <button class="layui-btn demo" data-type="test5">增加</button>
                    </a>
            </div>
        </main>
        <footer class="footer">
            <div class="container-fluid">
                <div class="row text-muted">

                    <div class="col-6 text-right">
                        <p class="mb-0">
                            &copy; 2019 - <a href="index.html" class="text-muted">AppStack</a>
                        </p>
                    </div>
                </div>
            </div>
        </footer>
    </div>
</div>

<script src="js\app.js"></script>

<script>
    layui.use( 'layer', function () {
        var $ = layui.jquery, layer = layui.layer //独立版的layer无需执行这一句

        //触发事件
        var active = {
            test   : function () {
                layer.alert( '你好么，体验者' )
            }
            , test2: function () {
                layer.confirm( '您是如何看待前端开发？', {
                    btn: [ '重要', '奇葩' ] //按钮
                }, function () {
                    layer.msg( '的确很重要', { icon: 1 } )
                }, function () {
                    layer.msg( '也可以这样', {
                        time: 20000, //20s后自动关闭
                        btn : [ '明白了', '知道了' ]
                    } )
                } )
            }
            , test3: function () {
                layer.msg( '玩命提示中' )
            }
            , test4: function () {
                layer.tips( 'Hi，我是一个小提示', this, { tips: 1 } )
            }
            , test5: function () {
                layer.open( {
                    title  : '更新论坛信息',
                    type   : 1,
                    skin   : 'layui-layer-rim',
                    area   : [ '500px', '580px' ],
                    content: $( '#test11111' )
                } )
            }
            , test6: function () {
                layer.open( {
                    type     : 2
                    , content: 'http://fly.layui.com/'
                    , area   : [ '375px', '500px' ]
                    , maxmin : true
                } )
            }
            , test7: function () {
                layer.prompt( { title: '输入任何口令，并确认', formType: 1 }, function ( pass, index ) {
                    layer.close( index )
                    layer.prompt( { title: '随便写点啥，并确认', formType: 2 }, function ( text, index ) {
                        layer.close( index )
                        layer.msg( '演示完毕！您的口令：' + pass + '<br>您最后写下了：' + text )
                    } )
                } )
            }
            , test8: function () {
                layer.tab( {
                    area: [ '600px', '300px' ],
                    tab : [ {
                        title  : 'TAB1',
                        content: '内容1'
                    }, {
                        title  : 'TAB2',
                        content: '内容2'
                    }, {
                        title  : 'TAB3',
                        content: '内容3'
                    } ]
                } )
            }
        }
        $( '.demo' ).on( 'click', function () {
            var type = $( this ).data( 'type' )
            active[ type ] ? active[ type ].call( this ) : ''
        } )

        function run() {
            var _index = 0
            var num = 1000
            var _interval = setInterval( function () {
                layer.close( _index )
                _index = layer.open( {
                    type   : 1,
                    title  : '在线调试',
                    shade  : 0,
                    content: '可以填写任意的layer代码'
                } )
                num--
                if ( num <= 0 ) {
                    clearInterval( _interval )
                    _interval = null
                }
            }, 20 )
        }

        window.run = run

    } )
</script>


</body>

</html>